﻿$(window).on('load', function () {

    TabContainer();
    VideoViewer();
});

function TabContainer() {
    var tabContainers = $('.tab_container');

    tabContainers.each(function () {
        var $container = $(this);
        $container.find('.tab').bind('click', function () {
            var $el = $(this),
                index = $el.index();

            $container.find('.tab').removeClass('active');
            $container.find('.tab_content').removeClass('active');
            $container.find('.tab_content').eq(index).addClass('active');
            $el.addClass('active');

        });
    });
}
function VideoViewer() {
    var $videoContainer = $('.video_list'),
        $viewer = $('.step_viewer'),
        activeIndex = 0,
        videoFlow = $videoContainer.find('.overflow'),
        slideTime = 500;

    $viewer.css({
        left: ($viewer.parent().width() - $viewer.width()) / 2
    });
    
    $videoContainer.find('.left').bind('click', function () {
        if (activeIndex > 0) {
            activeIndex--;
            
            videoFlow.animate({
                marginLeft: (activeIndex * 500) * -1
            }, slideTime, 'easeInOutQuart');
        }
        $viewer.find('span').removeClass('active');
        $viewer.find('span').eq(activeIndex).addClass('active');
    });

    $videoContainer.find('.right').bind('click', function () {
        if (activeIndex < $videoContainer.find('ul').length - 1) {
            activeIndex++;
            
            videoFlow.animate({
                marginLeft: (activeIndex * 500) * -1
            }, slideTime, 'easeInOutQuart');
        }
        $viewer.find('span').removeClass('active');
        $viewer.find('span').eq(activeIndex).addClass('active');
    });
}